<template>
  <el-dialog title="Permission"
             @open="getDialogData"
              width="50%"
             :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="Permission List"
                    :label-width="formLabelWidth">
        <el-select v-model="form.valueData"
                   multiple
                   collapse-tags
                   v-loading="loading"
                   placeholder="">
          <el-option v-for="(item,index) in permissionsList"
                     :key="index"
                     :label="item.dictLabel"
                     :disabled="item.disabled"
                     :value="item.dictValue"></el-option>

        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogFormVisible = false">Cancel</el-button>
      <el-button type="primary"
                 @click="onSave">Save</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Component } from '../modules/Component.js'
export default {
  data () {
    return {
      loading: false,
      permissionsList: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        valueData: []
      },
      formLabelWidth: '120px'
    }
  },
  props: {
    itemInfo: {
      type: Object
    }
  },
  created () {

  },
  methods: {
    async getDialogData () {
      try {
        this.loading = true
        const [defaultScopeList, customizeScopeList] = await Promise.all([
          this.getDefaultScopeList(),
          this.getCustomizeScopeList()
        ])
        this.permissionsList = defaultScopeList.concat(customizeScopeList)
        this.form.valueData = defaultScopeList.map((record) => record.dictValue)
        this.form.valueData = Array.from(new Set(this.form.valueData.concat(this.itemInfo.scope.split(' '))))
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    async getDefaultScopeList () {
      const { data: res } = await this.$interface.taskManager.getDefaultScopeList()
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      let defaultScopeList = res.data.map(item => {
        item.disabled = true
        return item
      })
      return defaultScopeList || []
    },
    async getCustomizeScopeList () {
      const { data: res } = await this.$interface.taskManager.getCustomizeScopeList()
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      let customizeScopeList = res.data
      return customizeScopeList || []
    },
    async onSave () {
      try {
        const { data: res } = await this.$interface.taskManager.getSaveScope({
          scope: this.form.valueData.join(' ')
        })
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(res.msg)
        Component.$emit('getConnectorConfig')
        this.dialogFormVisible = false
      } catch (error) {
        this.dialogFormVisible = false
      }
    }
  }

}
</script>
